<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>7.Vue监测数据改变的原理</title>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue监视数据的原理：
						1. vue会监视data中所有层次的数据。

						2. 如何监测对象中的数据？
										通过Object.defineProperty的setter实现监测数据

						3. 如何监测数组中的数据？
											通过包裹数组的变更方法实现，本质就是做了两件事：
												(1).调用原生对应的方法对数组进行更新。
												(2).重新解析模板，进而更新页面。

						4.在Vue修改数组中的某个元素一定要用如下方法：
									push()、pop()、shift()、unshift()、splice()、sort()、reverse()

				数据代理：
						1.目的：让程序员更加方便的读取到data中属性；
						2.原理：Object.defineProperty；
						3.体现：vm身上有每一个属性的proxyGetter、proxySetter；
						4.当修改vm上的属性时，该属性对应的proxySetter就会调用，去修改_data中对应的属性；
						5.当读取vm上的属性时，该属性对应的proxyGetter就会调用，去读取_data中对应的属性；
				
				数据劫持：
						1.目的：为了捕获到数据的改变，进而刷新页面；
						2.原理：Object.defineProperty；
						3.体现：_data身上有每一个属性的reactiveGetter、reactiveSetter；
						4.当修改_data上的属性时，该属性对应的reactiveSetter就会调用；
							备注：且在reactiveSetter中Vue会：修改数据、重新解析模板，刷新页面；
						5.当读取_data上的属性时，该属性对应的reactiveGetter就会调用，读取值；
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<ul>
				<li>名字：{{name}}</li>
				<li>性别：{{gender}}</li>
				<li>年龄：{{age}}</li>
				<li>
					汽车信息：
					<ul>
						<li>车名：{{car.name}}</li>
						<li>真实价格：{{car.price.realPrice}}</li>
						<li>对外价格：{{car.price.speakPrice}}</li>
					</ul>
				</li>
				<li>
					朋友们：
					<ul>
						<li v-for="f in friends">{{f.name}}--{{f.gender}}--{{f.age}}</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'张三',
				gender:'男',
				age:'18',
				car:{
					name:'奔驰',
					price:{
						speakPrice:'100万',
						realPrice:'10万'
					}
				},
				friends:[
					{name:'李四',gender:'男',age:19},
					{name:'王五',gender:'女',age:20}
				]
			}
		})
	</script>
</html>